<template>
  <a-row class="com-web-tool-editer-markdown">
    <a-col span="2">Markdown</a-col>
    <a-col span="22">
      <a-button
        class="btn"
        type="primary"
        size="small"
        @click="$refs.WModal_editer.show()"
      >
        自定义
      </a-button>
      <a-button
        class="btn"
        type="primary"
        size="small"
        @click="$refs.WModal_markdown.show()"
      >
        Simplemde
      </a-button>
    </a-col>
    <w-modal
      ref="WModal_editer"
      :hide-footer="true"
      :closable="false"
      width="1000px"
      class="com-web-tool-editer-markdown-model"
    >
      <w-editer zoom/>
      <div slot="close">
        <a-icon class="close-btn" type="close-circle" />
      </div>
    </w-modal>
    <w-modal
      ref="WModal_markdown"
      :hide-footer="true"
      :closable="false"
      width="1000px"
      class="com-web-tool-editer-markdown-model"
    >
      <w-simplemde-markdown />
      <div slot="close">
        <a-icon class="close-btn" type="close-circle" />
      </div>
    </w-modal>
  </a-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import WEditer from '@/components/global/marked/custom/editor'
import WModal from '@/components/global/modal'
import WSimplemdeMarkdown from '@/components/global/marked/simplemde/base'

@Component({
  name: 'ComWebToolEditerMarkdown',
  components: {
    WEditer,
    WSimplemdeMarkdown,
    WModal
  }
})
export default class ComWebToolEditerMarkdown extends Vue {

}
</script>

<style lang="less">
.com-web-tool-editer-markdown-model {
  .ivu-modal-close {
    right: 0;
    top: 0;
    z-index: 100;
  }
  .close-btn {
    color: #999;
    font-size: 20px;
  }
  .close-btn:hover {
    color: #fff;
    background-color: #f00;
    border-radius: 50%;
  }
}
</style>
